<template>
	<view class="shop">
		<view class="green"></view>
		<view class="inp">
			<input type="text" placeholder='输入你想要"搜索"的内容'><view class="magnifying" ><image src="../../static/shop/放大镜.png" mode=""></image> </view>
		</view>
		
		 <!-- 图片 -->
		 <view class="image">
		 	<image src="../../static/home/1a00487f-e474-4aa2-a743-19e29c3dabe0.png" mode=""></image>
		 </view>
		 
		 <!-- 商品信息 -->
		 <view class="shop-item">
			 <block v-for="(item,index) in shoplist" :key="index">
		 	<shop-list :list="item"></shop-list>
			</block>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoplist:[
					{id:0,name:"金龙鱼调和油1L",value:"	劲爽滋味，袋袋有奖品领取！",num:500,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png",
					image:[
						{id:0,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:1,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:2,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:3,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:4,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"}
					]
					},{id:1,name:"金龙鱼调和油1L",value:"	劲爽滋味，袋袋有奖品领取！",num:500,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png",
					image:[
						{id:0,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:1,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:2,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:3,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:4,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"}
					]
					},{id:2,name:"金龙鱼调和油1L",value:"	劲爽滋味，袋袋有奖品领取！",num:500,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png",
					image:[
						{id:0,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:1,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:2,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:3,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:4,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"}
					]
					},{id:3,name:"金龙鱼调和油1L",value:"	劲爽滋味，袋袋有奖品领取！",num:500,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png",
					image:[
						{id:0,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:1,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:2,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:3,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"},
						{id:4,img:"../../static/shop/O1CN01wsuwzb1eghdiuDLi8_!!3336263901.jpg_400x400.png"}
					]
					}
				]
			};
		}
	}
</script>

<style lang="less" scoped>
.shop{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	background-color: #f5f5f5;
	width: 100vw;
	min-height: 100vh;
    z-index: 0;
	.green{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 250rpx;
		background-color: #00c783;
		border-radius: 0 0 30rpx 30rpx;
		z-index: -1;
	}
}
.inp{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 710rpx;
	height: 65rpx;
	margin: 20rpx;
	input{
		background-color: #ffffff;
		width: 645rpx;
		height: 100%;
		border-radius: 10rpx 0 0 10rpx;
		padding-left: 10rpx;
		line-height: 100%;
		font-size: 26rpx;
	}
	.magnifying{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 65rpx;
		height: 65rpx;
		background-color: #fff;
		border-radius: 0 10rpx 10rpx 0;
		
		image{
			width: 70%;
			height: 70%;
		}
	}
}
.image{
	height: 330rpx;
	width: 710rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	image{
		width: 100%;
		height: 100%;
	}
}
.shop-item{
	width: 710rpx;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-around;
	align-items: center;
}
</style>
